<template>
    <div class="v-echarts">
        <chart :options="option"></chart>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'v-echarts',
        props: {
            // echarts名称
            title: {
                type: String
            },
            // echarts头部
            legendData: {
                type: Array
            },
            // 横坐标数据
            xAxisData: {
                type: Array
            },
            // echarts图数据
            seriesData: {
                type: Array
            },
            echartsType: {
                type: String,
                default: 'line'
            }
        },
        watch: {
            echartsType (val) {
                this.option.series.forEach((item, index) => {
                    item.type = val
                    this.option.series.splice(index, 1, item)
                })
            },
            legendData (val) {
                this.option.legend.data = val
            },
            xAxisData (val) {
                this.option.xAxis[0].data = val
            },
            seriesData (val) {
                this.option.series = []
                val.forEach(item => {
                    item.type = this.echartsType
                    this.option.series.push(item)
                })
            }
        },
        data () {
            return {
                option: {
                    title: {
                        text: '' // echarts名称
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [] // echarts头部
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: [] // 横坐标数据
                        }
                    ],
                    yAxis: {
                        type: 'value'
                    },
                    series: [] // echarts图数据
                }

            }
        },
        created () {
            this.option.legend.data = this.legendData
            this.option.xAxis[0].data = this.xAxisData
            this.seriesData.forEach(item => {
                item.type = this.echartsType
                this.option.series.push(item)
            })
        }
    }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylusstylesheet/stylus">

</style>
